<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频播放页 - 哔哩哔哩</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
    <link href="css/video.css" rel="stylesheet">
    <link href="css/common.css" rel='stylesheet'>
    <link href="css/login.css" rel="stylesheet">
    <script src="/b-user/js/login.js"></script>
    <script src="/js/vws.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div id="app">
    <vws ref="w" prefix="ws://127.0.0.1:8003/video/" :msgs.sync="msgs"></vws>
    <common @logined="logined"></common>
    <div class="container">
        <!-- 左侧主要内容 -->
        <div class="main-content">

            <div class="video-info">
                <h1 class="video-title">{{userandvideo.vname}}</h1>
                <div class="video-meta">
                    <span>{{userandvideo.vcount > 10000 ? userandvideo.vcount/10000 + "万" : userandvideo.vcount}}播放</span> ·
                    <span>2025-03-05 12:05:00</span>
                </div>
            </div>

            <div id="video-player">
                <video  ref="video" class="video" :src="userandvideo.path" controls loop autoplay></video>
            </div>

            <div class="danmu-control">
                <ul style="display: flex; justify-content:space-between; align-items: baseline; font-size: larger; width: 668px; list-style: none;">
                    <li><span>在线人数:{{onlineNum}}</span></li>

                    <li>
                        <el-popover
                                ref="popover-click"
                                placement="top-start"
                                width="200"
                                trigger="click">
                            <div >
                                <div><label style="display: flex">弹幕速度</label><input ref="danmuspeed" type="range"  min="0" max="10" value="3" v-model="danmutime"></div>
                                <div><label style="display: flex">弹幕透明度</label><input ref="danmutmd" type="range"  min="0" max="10" value="5" v-model="opacity"></div>
                                <div><label style="display: flex">字体大小</label><input ref="danmusize" type="range"  min="8" max="24" value="16" v-model="danmusize"></div>
                            </div>
                            <li><img v-popover:popover-click src="image/弹幕设置.png" style="width: 25px; height: 25px;"></li>
                        </el-popover>
                    </li>

                    <li><img :src=" IsOpenDanMu ? 'image/弹幕.png' : 'image/关闭弹幕.png'" style="width: 25px; height: 25px;" @click="switchDanMu"></li>


                    <!-- 修改部分开始：弹幕输入区域 -->
                    <li style="display: flex; align-items: center; gap: 8px;">
                        <!-- 弹幕颜色选择器 - 修改为更紧凑的样式 -->
                        <el-popover
                                placement="top-start"
                                width="200"
                                trigger="click">
                            <span style="display: flex; margin-bottom: 8px;">弹幕颜色</span>
                            <el-color-picker v-model="color" show-alpha></el-color-picker>
                            <template #reference>
                                <div style="
                        width: 32px;
                        height: 32px;
                        border-radius: 4px;
                        background: #f0f0f0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                    ">
                        <span style="
                            color: #666;
                            font-weight: bold;
                            font-size: 14px;
                        ">A</span>
                                </div>
                            </template>
                        </el-popover>

                        <!-- 输入框 - 添加圆角和更好的内边距 -->
                        <input
                                id="inputText"
                                v-model="danmuText"
                                placeholder="发个弹幕呗~"
                                style="
                    height: 32px;
                    padding: 0 12px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    outline: none;
                    transition: border 0.3s;
                    width: 200px;
                "
                                @keyup.enter="savedanmu"
                        >

                        <!-- 发送按钮 - 添加悬停效果和更好的样式 -->
                        <button
                                id="danmuInput"
                                @click="savedanmu()"
                                style="
                    height: 32px;
                    padding: 0 16px;
                    background-color: #00aeec;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                    transition: background 0.3s;
                "
                                @mouseover="this.style.backgroundColor='#0095d9'"
                                @mouseout="this.style.backgroundColor='#00aeec'"
                        >
                            发送
                        </button>
                    </li>
                </ul>
            </div>

            <div class="action-buttons">
                <div class="action-btn">
                    <span>{{userandvideo.likes > 10000 ? userandvideo.likes/10000 + "万" : userandvideo.likes}}</span>
                    <img ref="like" src="image/点赞_块.png" @click="like"  style="width: 25px">
                </div>
                <div class="action-btn">
                    <span>{{userandvideo.coin > 10000 ? userandvideo.coin/10000 + "万" : userandvideo.coin}}</span>
                    <img ref="coin" src="image/投币@2x.png" @click="coin" style="width: 25px">
                </div>
                <div class="action-btn">
                    <span>{{userandvideo.collect > 10000 ? userandvideo.collect/10000 + "万" : userandvideo.collect}}</span>
                    <img ref="collect" src="image/收 藏.png" @click="collect" style="width: 25px">
                </div>
<!--                <div class="action-btn">-->
<!--                    <span>727</span>-->
<!--                    <img src="image/转发.png" style="width: 25px">-->
<!--                </div>-->
            </div>
            <hr/>

            <div class="video-tags">
                <a :href="'search.html?searchText=' + t + '&type=tag'" class="video-tag" v-for="t in tag">{{t}}</a>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
            <div class="author-info">
                <div class="author-header">
                    <img :src="userandvideo.headimg" @click="location.href = 'me.html?id='+ userandvideo.uid" class="author-avatar">
                    <div>
                        <div style="display: flex;justify-content: space-between">
                            <p>{{userandvideo.name}}</p>
<!--                            <p>{{userandvideo.title}}</p>-->
                        </div>
                        <p>粉丝：{{userandvideo.fens > 10000 ? userandvideo.fens / 10000 + '万' : userandvideo.fens}}</p>
                    </div>
                </div>
                <button ref="subscribeBut" class="send-btn" @click="subscribe" v-if="myinfo.id == userandvideo.uid ? false : true">+ 关注</button>
            </div>

            <h3>相关推荐</h3>
            <div>
                <div class="related-video" v-for="rel in relVideo">
                    <img class="related-thumb" :src="rel.image" @click="location.href = 'video.html?id=' + rel.id">
                    <div>
                        <h3>{{rel.vname}}</h3>
                        <div class="re-video-message">
                            <p>{{rel.name}}</p>
                            <p>{{rel.vcount > 10000 ? (rel.vcount/10000).toFixed(1) + "万" : rel.vcount}}播放 · {{rel.danmucount > 10000 ? (rel.danmucount/10000).toFixed(1) + "万" : rel.danmucount}}弹幕</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 更多推荐视频... -->
        </div>
    </div>
</div>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            msgs:[],        // 实时弹幕信息
            userandvideo:{}, // 视频页面的视频数据以及相关的视频发布者的数据
            myinfo: {},
            endtime: 0,
            users:{},
            danmuText: "",
            danmus:[],
            showedDanmus: [], // 存储已显示的弹幕ID（避免重复显示
            danmutime: 3, //弹幕出现时间
            danmusize: 16, //弹幕大小
            opacity: 5,// 弹幕透明度
            color: "white", // 弹幕颜色
            islike: false, //判断是否点赞
            iscoin: false,
            iscollect:false,
            VideoDataDetail: {}, //当前用户对视频的数据
            isSubscribe: false, // 用户是否对当前up主进行关注
            SubscribeInfo: {}, // 关注的数据
            onlineNum: 0, // 在线人数
            IsOpenDanMu: true, // 弹幕是否打开
            tag: [],
            relVideo: {},

        },
        created() {

            axios.get("danmu/getDanmuByVid"+location.search).then(res=> {
                this.danmus = res.data
                this.loadDanMus();
            });
            this.getVideoByVid();

            this.playCount();

        },
        methods : {
            logined(myinfo){
                this.myinfo = myinfo
                this.$refs.w.login(this.myinfo.id, location.search.split("=")[1]);
                // 加载视频进度
                axios.get("videoplayhistroy/getvideodenTime", {
                    params:{
                        uid: this.myinfo.id,
                        vid: location.search.split("=")[1]
                    }
                }).then(res=>{
                    if(res.data){
                        this.endtime = res.data.endtime
                        this.$refs.video.currentTime = this.endtime; // 视频跳转
                    }
                })

                // 一键三联渲染
                axios.get("VideoDataDetail/getDataByUidAndVid",{
                    params:{
                        uid: this.myinfo.id,
                        vid: location.search.split("=")[1]
                    }
                }).then(res=>{
                    this.VideoDataDetail = res.data
                    // 渲染界面数据
                    if(this.VideoDataDetail.likes == 1){
                        this.$refs.like.src = "image/ic-ms-savemore.png"
                        this.islike = true
                    }

                    if(this.VideoDataDetail.coin == 1){
                        this.$refs.coin.src = "image/投币激活@2x.png"
                        this.iscoin = true
                    }

                    if(this.VideoDataDetail.collect == 1){
                        this.$refs.collect.src = "image/icon-收藏-粉色实心.png"
                        this.iscollect = true
                    }
                })



            },
            async getVideoByVid(){
                axios.get("video/getVideoByVid"+location.search).then(res=> {
                    this.userandvideo = res.data
                    this.getRelVideo();
                    this.tag = this.userandvideo.tag.split(";")
                    this.getSubscribeRelation()
                });
            },
            // 相关推荐
            getRelVideo(){
                axios.get("video/getRelVideo",{
                    params:{
                        // id: location.search.split("=")[1],
                        bid: this.userandvideo.bid
                    }
                }).then(res=> {
                    this.relVideo = res.data
                    this.relVideo.forEach(v=>{
                        if(v.id == location.search.split("=")[1]){
                            this.relVideo.splice(this.relVideo.indexOf(v), 1)
                        }
                    })
                });
            },
            // 播放量统计
            playCount(){
                if(this.myinfo){
                    axios.get("video/playCount"+location.search)
                }
            },

            // 关注
            subscribe(){
                if(this.isSubscribe){
                    this.isSubscribe = false;
                    this.$refs.subscribeBut.style.background = "#00AEEC";
                    this.$refs.subscribeBut.textContent = "+ 关注"
                }else{
                    // 界面数据渲染
                    this.isSubscribe = true;
                    this.$refs.subscribeBut.style.background = "gray";
                    this.$refs.subscribeBut.textContent = "已关注"
                }
            },
            getSubscribeRelation(){
                axios.get("b-user/reupfens/getSubscribeRelation", {
                    params:{
                        uid: this.myinfo.id,
                        upid: this.userandvideo.uid,
                    }
                }).then(res=>{
                    if(res.data){
                        // 界面数据渲染
                        this.SubscribeInfo = res.data
                        this.isSubscribe = true;
                        this.$refs.subscribeBut.style.background = "gray";
                        this.$refs.subscribeBut.textContent = "已关注"
                    }else{
                        this.isSubscribe = false;
                        this.$refs.subscribeBut.style.background = "#00AEEC";
                        this.$refs.subscribeBut.textContent = "+ 关注"
                    }
                })
            },
            saveVideoProgress(){
                if(this.myinfo){
                    const videoplayhistroy={
                        uid: this.myinfo.id,
                        vid: location.search.split("=")[1],
                        endtime: this.$refs.video.currentTime
                    }
                    axios.post("videoplayhistroy/saveVideoProgress", videoplayhistroy)
                }
            },

            // saveVideoData 这个函数会在离开此页面的时候执行，目的是为了防止用户频繁的对一些视频或者用户数据进行操作
            saveVideoData() {
                if(this.myinfo){
                    this.saveVideoProgress();
                    const videoData = {
                        id: null,
                        vid: location.search.split("=")[1],
                        uid: this.myinfo.id,
                        //1 有变化
                        likes: this.islike ? 1 : 0,
                        coin: this.iscoin ? 1 : 0,
                        collect: this.iscollect ? 1 : 0,
                        time: null
                    }
                    // 一键三联的数据
                    if(Object.keys(this.myinfo).length > 0){

                        if( videoData.likes == this.VideoDataDetail.likes && videoData.coin == this.VideoDataDetail.coin
                            && videoData.collect == this.VideoDataDetail.collect){
                        }else{
                            axios.post("VideoDataDetail/savelike-coin-collect", videoData)
                        }
                    }

                    // 关注
                    axios.get("b-user/reupfens/subscribe", {
                        params:{
                            uid: this.myinfo.id,
                            upid: this.userandvideo.uid,
                            isSubscribe: this.isSubscribe ? "true": "false"
                        }
                    })
                }

            },

            // 清除所有弹幕
            clearAllDanmus() {
                const danmuBox = document.getElementById('video-player');
                // 移除所有弹幕元素
                const danmus = danmuBox.querySelectorAll('.danmu');
                danmus.forEach(danmu => danmu.remove());

                // 移除所有动画样式
                const animationStyles = document.querySelectorAll('style[id^="moveBarrage"]');
                animationStyles.forEach(style => style.remove());

                // 清空已显示弹幕记录
                this.showedDanmus = [];
            },


            // 创建弹幕元素
            createDanmuElement(text, uid, color) {
                if(!text || text.trim() === ""){
                    this.$alert("请输入内容")
                    return 0;
                }

                // 弹幕容器引用
                const danmuBox = document.getElementById('video-player');
                const data = text;
                const danmu = document.createElement('div');
                danmu.className = 'danmu';
                danmu.dataset.id = Date.now() + Math.random().toString(36).substr(2, 5); // 添加唯一ID
                danmu.textContent = data;
                danmu.style.color = color;
                danmu.style.fontSize = this.danmusize + "px";
                danmu.style.opacity = (this.opacity * 0.1);
                // 区别自己和他人的弹幕
                if(this.myinfo){
                    if(uid == this.myinfo.id){
                        danmu.style.border = "2px solid black"
                        danmu.style.color = this.color;
                    }
                }

                const DomRect = document.getElementById('video-player').getBoundingClientRect();



                danmu.style.top = `${Math.random() * (DomRect.height - 40)}px`; // 随机垂直位置

                danmuBox.appendChild(danmu);


                const itemWidth = danmu.offsetWidth; // 获取弹幕元素的宽度
                const containerWidth = danmuBox.offsetWidth; // 获取显示区域的宽度

                // 设置弹幕的起始位置（显示区域右侧外部）
                danmu.style.left = `${DomRect.width - itemWidth}px`;

                // 定义动画关键帧
                const animationName = `moveBarrage${danmu.id}`;
                const css = `
                    @keyframes ${animationName} {
                    from {
                        transform: translateX(100%);
                    }
                    to {
                        transform: translateX(-${containerWidth}px);
                    }
                    }
                `;
                // 将CSS添加到文档中（仅当该动画尚未定义时）
                if (!document.getElementById(animationName)) {
                    const style = document.createElement('style');
                    style.id = animationName;
                    style.textContent = css;
                    document.head.appendChild(style);
                }

                // 应用动画到弹幕元素
                const duration = 5 + Math.random() * (10 - this.danmutime); // 5-8秒随机速度
                danmu.style.animation = `${animationName} ${duration}s linear forwards`; // 动画持续时间为5秒，可以根据需要调整


                // 动画结束后移除元素
                danmu.addEventListener('animationend', () => {
                    danmu.remove();
                });


            },
            // 保存弹幕到服务端
            savedanmu(){
                // console.log(Object.keys(this.myinfo).length)

                if(Object.keys(this.myinfo).length === 0){
                    this.$alert("请先登录")
                    return ;
                }
                if(this.danmuText == null || this.danmuText == ""){
                    this.$alert("请输入内容")
                    return ;
                }
                // var number = this.createDanmuElement(this.danmuText, this.myinfo.id, this.color);
                // if(number == 0){
                //     return;
                // }
                const danmuData = {
                    uid: this.myinfo.id,
                    vid: location.search.split("=")[1],
                    content: this.danmuText,
                    videotime: this.$refs.video.currentTime

                }
                // 将弹幕数据发送到服务端
                axios.post("danmu/savedanmu", danmuData)

                // 将弹幕发送给其他人
                this.sendanmu()
            },

            // 发送弹幕
             sendanmu() {
                const message = {
                    id: this.myinfo.id + Date.now(),
                    content: this.danmuText,
                    color: this.color,
                    videotime: this.$refs.video.currentTime,
                };

                // 通过WebSocket发送消息
                this.$refs.w.send(JSON.stringify(message));
                this.danmuText = '';
                // console.log(JSON.parse(this.msgs[0]))

            },
             timeupdateHandler(){
                const videoEl = this.$refs.video;
                const videoTime = videoEl.currentTime;
                let danmuCount = 0;
                // 加载数据库弹幕
                this.danmus.forEach(danmu => {
                    if (danmuCount >= 3) return;
                    if (!this.showedDanmus.includes(danmu.id) && Math.abs(videoTime - danmu.videotime) < 0.5) {
                        this.createDanmuElement(danmu.content, danmu.uid, danmu.color);
                        this.showedDanmus.push(danmu.id);
                        danmuCount++;
                    }
                });

                // 加载在线弹幕
                this.msgs.forEach(msg => {
                    this.onlineNum = msg.onlineNum;
                    if (msg.content != "" && msg.content != null) {
                        let content = JSON.parse(msg.content);
                        if (!this.showedDanmus.includes(content.id) && Math.abs(videoTime - content.videotime) < 0.5) {
                            this.createDanmuElement(content.content, msg.author.uid, content.color);
                            this.showedDanmus.push(content.id);
                        }
                    }
                });

                if (videoTime % 2 < 0.5) {
                    this.saveVideoProgress();
                }
            },
            // 随着视频的播放加载弹幕
            loadDanMus() {
                const videoEl = this.$refs.video;

                // 先清除所有现有弹幕
                this.clearAllDanmus();

                const resetHandler = () => {
                    this.clearAllDanmus(); // 清除方法
                };

                // 移除旧监听器
                videoEl.removeEventListener('timeupdate', this.timeupdateHandler);
                videoEl.removeEventListener('ended', resetHandler);
                videoEl.removeEventListener('seeked', resetHandler);

                // 添加新监听器
                videoEl.addEventListener('timeupdate', this.timeupdateHandler);
                videoEl.addEventListener('ended', resetHandler);
                videoEl.addEventListener('seeked', resetHandler);

                // 添加循环播放监听
                videoEl.addEventListener('play', () => {
                    if(videoEl.currentTime === 0) {
                        this.clearAllDanmus();
                    }
                });
            },
            switchDanMu(){
                const videoEl = this.$refs.video;
                if(this.IsOpenDanMu){
                    this.IsOpenDanMu = false;
                    this.clearAllDanmus();
                    videoEl.removeEventListener('timeupdate', this.timeupdateHandler);
                }else {
                    this.IsOpenDanMu = true;
                    videoEl.addEventListener('timeupdate', this.timeupdateHandler);
                }
            },
            // 点赞
            like(){
                if(Object.keys(this.myinfo).length === 0){
                    this.$alert("请先登录")
                    return
                }else{
                    if(this.islike){
                        this.$refs.like.src = "image/点赞_块.png"
                        this.islike = false
                        this.userandvideo.likes = this.userandvideo.likes - 1
                    }else{
                        this.$refs.like.src = "image/ic-ms-savemore.png"
                        this.islike = true
                        this.userandvideo.likes = this.userandvideo.likes + 1
                    }
                }

            },
            // 投币
            coin(){
                if(Object.keys(this.myinfo).length === 0){
                    this.$alert("请先登录")
                    return
                }else{
                    if(this.iscoin = false){
                        this.$refs.coin.src = "image/投币激活@2x.png"
                        this.iscoin = true
                        this.userandvideo.coin = this.userandvideo.coin + 1
                    } else{
                        return
                    }
                }

            },
            //收藏
            collect(){
                if(Object.keys(this.myinfo).length === 0){
                    this.$alert("请先登录")
                    return
                }else {
                    if(this.iscollect){
                        this.$refs.collect.src = "image/收 藏.png"
                        this.iscollect = false
                        this.userandvideo.collect = this.userandvideo.collect - 1

                    }else{
                        this.$refs.collect.src = "image/icon-收藏-粉色实心.png"
                        this.iscollect = true
                        this.userandvideo.collect = this.userandvideo.collect + 1

                    }
                }
            },
            updateExistingDanmus(styles) {
                const danmus = document.querySelectorAll('.danmu');
                danmus.forEach(danmu => {
                    if (styles.size) danmu.style.fontSize = `${styles.size}px`;
                    if (styles.opacity) danmu.style.opacity = styles.opacity;
                    if (styles.speed) {
                        const duration = 5 + Math.random() * (10 - styles.speed);
                        const animationName = `moveBarrage${Date.now()}`;
                        const containerWidth = danmu.parentElement.offsetWidth;

                        // 移除旧动画
                        const oldStyle = document.querySelector(`style[id="${danmu.id}"]`);
                        if (oldStyle) oldStyle.remove();

                        // 创建新动画
                        const style = document.createElement('style');
                        style.id = danmu.id;
                        style.textContent = `
            @keyframes ${animationName} {
              from { transform: translateX(100%); }
              to { transform: translateX(-${containerWidth}px); }
            }
          `;
                        document.head.appendChild(style);

                        // 应用新动画
                        danmu.style.animation = `${animationName} ${duration}s linear forwards`;
                    }
                });
            }
        },
        mounted(){
                // // 回车发送支持
                // document.getElementById('danmuInput').addEventListener('keypress', (e) => {
                //     if (e.key === 'Enter') sendDanmu();
                // });
                // 添加 beforeunload 事件监听器, 当用户离开此页面时触发
                // this.$refs.danmuspeed.addEventListener('input', function() {
                //
                //     this.danmutime = this.value
                //     console.log(this.danmutime)
                // });
                // this.$refs.danmusize.addEventListener('input', function() {
                //     this.danmusize = this.value
                //     console.log(this.danmusize)
                // });
                // this.$refs.danmutmd.addEventListener('input', function() {
                //     this.opacity = this.value
                // });
            // 长按触发“一键三联”功能
            this.$refs.like.addEventListener('mousedown', (e) => {
                // 防止触发默认的点击事件
                e.preventDefault();

                // 设置定时器，等待长按时间
                pressTimer = setTimeout(() => {
                    this.$refs.like.src = "image/ic-ms-savemore.png"
                    this.islike = true
                    this.$refs.coin.src = "image/投币激活@2x.png"
                    this.iscoin = true
                    this.$refs.collect.src = "image/icon-收藏-粉色实心.png"
                    this.iscollect = true
                    this.$alert("一键三联成功！");
                    console.log("123",this.islike == this.VideoDataDetail.likes)
                }, 2000);
            });

            this.$refs.like.addEventListener('mouseup', () => {
                // 清除定时器，防止误触发
                clearTimeout(pressTimer);
            });

            this.$refs.like.addEventListener('mouseleave', () => {
                // 鼠标移出按钮时也清除定时器
                if(pressTimer){
                    clearTimeout(pressTimer);
                }

            });

                window.addEventListener('beforeunload', this.saveVideoData);
            },
            beforeDestroy() {
                // 移除事件监听器
                window.removeEventListener('beforeunload', this.saveVideoData);
                // 组件销毁前也保存一次进度
                this.saveVideoData();
            },

        watch: {
            danmutime(newVal) {
                this.updateExistingDanmus({ speed: newVal });
            },
            danmusize(newVal) {
                this.updateExistingDanmus({ size: newVal });
            },
            opacity(newVal) {
                this.updateExistingDanmus({ opacity: newVal * 0.1 });
            }
        },
        })
</script>


<script>
    // 弹幕开关功能
    // const danmuSwitch = document.getElementById('danmuSwitch');
    // danmuSwitch.addEventListener('change', function() {
    //     console.log('弹幕状态：', this.checked);
    // });

    // // 互动按钮功能
    // document.querySelectorAll('.action-btn button').forEach(btn => {
    //     btn.addEventListener('click', function() {
    //         this.closest('.action-btn').classList.toggle('active');
    //     });
    // });

    // // 弹幕发送功能
    // document.querySelector('.send-btn').addEventListener('click', function() {
    //     const input = document.querySelector('.danmu-input');
    //     if (input.value.trim()) {
    //         console.log('发送弹幕：', input.value);
    //         input.value = '';
    //     }
    // });
</script>

<script>

</script>
</body>
</html>